<script setup>
import Animate from '@/components/Animate.vue';
import NumberComp from '@/components/NumberComp.vue';
import Zzt from '@/components/Zzt.vue';
import Bt from '@/components/Bt.vue';

import { ref,onMounted } from 'vue'
import { BorderBox1,BorderBox8 } from '@dataview/datav-vue3';
const step = ref(0)
import navIcon1 from '../assets/img/navIcon1.png'
import navIcon2 from '../assets/img/navIcon2.png'
import navIcon3 from '../assets/img/navIcon3.png'
import navIcon4 from '../assets/img/navIcon4.png'
import navIcon5 from '../assets/img/navIcon5.png'
import navIcon6 from '../assets/img/navIcon6.png'
import navIconHover1 from '../assets/img/navIconHover1.png'
import navIconHover2 from '../assets/img/navIconHover2.png'
import navIconHover3 from '../assets/img/navIconHover3.png'
import navIconHover4 from '../assets/img/navIconHover4.png'
import navIconHover5 from '../assets/img/navIconHover5.png'
import navIconHover6 from '../assets/img/navIconHover6.png'
// 响应式状态
const navList = ref([
  {
    id:0,
    firstNavName:'计划任务',
    icon:navIcon1,
    icon_active:navIconHover1,
    secondNavList:[],
  },
  {
    id:1,
    firstNavName:'故障处理',
    icon:navIcon2,
    icon_active:navIconHover2,
    secondNavList:[],
  },
  {
    id:2,
    firstNavName:'重载监控',
    icon:navIcon3,
    icon_active:navIconHover3,
    secondNavList:[],
  },
  {
    id:3,
    firstNavName:'异常信号',
    icon:navIcon4,
    icon_active:navIconHover4,
    secondNavList:[
      {
        id:0,
        secondNavName:'总览'
      },
      {
        id:1,
        secondNavName:'个人'
      },
      {
        id:2,
        secondNavName:'数据统计'
      }
    ],
  },
  {
    id:4,
    firstNavName:'增量配电网',
    icon:navIcon5,
    icon_active:navIconHover5,
    secondNavList:[],
  },
  {
    id:5,
    firstNavName:'分布式能源',
    icon:navIcon6,
    icon_active:navIconHover6,
    secondNavList:[],
  }
])
// 导航hover 索引
const hoverIndices = ref({
  first: null,
  second: null
});
function handleHover(type, index) {
  hoverIndices.value[type] = index;
}
function handleUnHover(type) {
  hoverIndices.value[type] = null;
}
const firstNavActiveIndex = ref(3);
const secondNavActiveIndex = ref(0);
const table = ref({
  thead: [
    {id:0,name:'时间'},
    {id:1,name:'信号'},
    {id:2,name:'持续时间'},
    {id:3,name:'紧急程度'},
    {id:4,name:'处置状态'},
    {id:5,name:'跟进人'},
    {id:6,name:'历史记录关联'},
    {id:7,name:'标签'},
  ],
  tbody: [
    {id:0,time:'2024-06-18 03:01:47',signal:'故障',isFault:true,duration:'59s',level:'P5',status:'已完成',processedBy:'孙思达',historyRelevance:'记录描述',flag:'安全'},
    {id:1,time:'2024-06-16 01:33:26',signal:'关注',isFault:false,duration:'22s',level:'P4',status:'待处理',processedBy:'王嘉骐',historyRelevance:'记录描述',flag:'检查'},
    {id:2,time:'2024-06-14 04:27:10',signal:'故障',isFault:true,duration:'14s',level:'P2',status:'处理中',processedBy:'周江额',historyRelevance:'记录描述',flag:'安全'},
    {id:3,time:'2024-06-14 02:33:32',signal:'故障',isFault:true,duration:'32s',level:'P1',status:'处理中',processedBy:'赵小瑞',historyRelevance:'记录描述',flag:'电网'},
    {id:4,time:'2024-06-12 00:25:17',signal:'关注',isFault:false,duration:'27s',level:'P3',status:'待处理',processedBy:'冯毅言',historyRelevance:'记录描述',flag:'安全'},
  ]
})
import * as echarts from 'echarts';
const chart = ref(null);
onMounted(() => {
  step.value = 1
  const chartDom = echarts.init(chart.value);
  chartDom.setOption({
    title: {
      text: '单位：%',
      textStyle:{
        color:'rgba(255,255,255,0.5)',
        fontSize:8,
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label:{
          show: false
        }
      },
      formatter: function (params) {
        // console.log(params[0]);
        // 自定义显示内容
        return params[0].axisValue + ' ：' + params[0].value;
      },
      backgroundColor: 'rgba(0,0,0,0.6)',
      borderColor: 'rgba(255,255,255,0.7)',
      borderWidth:2,
      textStyle:{
        color:'#fff'
      }
    },
    xAxis: {
      type: 'category',
      // boundaryGap: false,
      axisTick: {
        show: false
      },
      axisLabel: {
        color:'rgba(149,209,255,0.7)'
      },
      axisLine:{
        lineStyle:{
          color:'#3372D5'
          // color: 'rgba(149,209,255,0.7)'
        }
      },
      data: ["故障", "超载", "异常", "关注"]
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '30%'],
      axisLabel: {
        color: 'rgba(255,255,255,0.5)',
      },
      splitLine: {
        lineStyle:{color: '#3372D5',opacity:0.4}
      }
    },
    grid:{
      left:'2%',
      right:'12%',
      bottom:'2%',
      top:'18%',
      containLabel: true,
    },
    series: [
      {
        type: 'line',
        smooth: true,
        // lineStyle: {
        //   color: '#5470C6',
        //   width: 2
        // },
        itemStyle: {
          color: '#4dd9f9'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0,145,255,0.4)'
            },
            {
              offset: 1,
              color: 'rgba(0,87,153,0)'
            }
          ])
        },
        data: [52, 73, 58, 78]
        // data: [
        //   ['故障', 52],
        //   ['超载', 73],
        //   ['异常', 58],
        //   ['关注', 78]
        // ]
      }
    ]
  })
  changeNumber1(456);
  changeNumber2(456);
  changeNumber3(563);
})
const num = ref([0,0,0])
const changeNumber1=(num1)=>{
    let time = setInterval(()=>{
        num.value[0] += 10
        if(num.value[0]>=num1){
            num.value[0]=num1
            clearInterval(time)
        }
    },30)
    
}
const changeNumber2=(num1)=>{
    let time = setInterval(()=>{
        num.value[1] += 10
        if(num.value[1]>=num1){
            num.value[1]=num1
            clearInterval(time)
        }
    },30)
    
}
const changeNumber3=(num1)=>{
    let time = setInterval(()=>{
        num.value[2] += 10
        if(num.value[2]>=num1){
            num.value[2]=num1
            clearInterval(time)
        }
    },30)
}
</script>

<template>
  <!-- <BorderBox1></BorderBox1> -->
  <div class="container">
    <div class="close"></div>
    <img class="bg_top" src="../assets/img/bg_top.png" alt="">
    <div class="content">
      <BorderBox8 class="navBorder" dur="5">
        <div class="navigation">
          <ul class="navList">
            <li class="navItem" v-for="(nav,index) in navList" :key="nav.id" @mouseover="handleHover('first',index)"
            @mouseleave="unHoverItem('first')">
              <div class="firstNav">
                <img :src="nav.icon_active" alt="" v-show="hoverIndices['first'] === index || firstNavActiveIndex === index">
                <img :src="nav.icon" alt="" v-show="hoverIndices['first'] !== index && firstNavActiveIndex !== index">
                <div class="firstNavName" :class="{hoverColor:hoverIndices['first'] === index || firstNavActiveIndex === index}">{{ nav.firstNavName }}</div>
              </div>
              <ul class="secondNavList" v-if="nav.secondNavList.length > 0">
                <li class="secondNavItem" v-for="(secondNav,secondIndex) in nav.secondNavList" :key="secondNav.id" @mouseover="handleHover('second', secondIndex)"
                @mouseleave="handleUnHover('second')" :class="{hoverBg:hoverIndices['second'] === secondIndex || secondNavActiveIndex === secondIndex}">
                  <div class="secondNavName">{{ secondNav.secondNavName }}</div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </BorderBox8>
      <div class="recordContainer">
        <div class="process">
          <Animate :step="step"></Animate>
        </div>
        <BorderBox8 :reverse="true" dur="5" class="recordContentBorder">
          <div class="recordContent">
            <!-- <img class="recordTitle" src="../assets/img/recordTitle.png" alt=""> -->
            <div class="tableCon">
              <table class="table">
                <thead>
                  <tr>
                    <th v-for="(theadItem,index) in table.thead" :key="theadItem.id">{{ theadItem.name }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(tbodyItem,index) in table.tbody" :key="tbodyItem.id">
                    <td>{{ tbodyItem.time }}</td>
                    <td :class="{fault:tbodyItem.isFault}">{{ tbodyItem.signal }}</td>
                    <td>{{ tbodyItem.duration }}</td>
                    <td>{{ tbodyItem.level }}</td>
                    <td>{{ tbodyItem.status }}</td>
                    <td>{{ tbodyItem.processedBy }}</td>
                    <td>{{ tbodyItem.historyRelevance }}</td>
                    <td>{{ tbodyItem.flag }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </BorderBox8>
      </div>
      <div class="abnormal">
        <div class="abnormalList">
          <li class="abnormalItem">
            <BorderBox8 class="abnormalContentBorder" dur="5">
              <div class="abnormalContent abnormalBg1">
                <Bt></Bt>
                <div class="chartContainer">
                  <div ref="chart" style="width:100%;height:100%;"></div>
                </div>
              </div>
            </BorderBox8>
          </li>
          <li class="abnormalItem">
            <!-- <img src="../assets/img/abnormal_title2.png" alt=""> -->
            <BorderBox8 class="abnormalContentBorder" dur="5" :reverse="true">
              <div class="abnormalContent abnormalBg2">
                <ul class="list">
                  <li class="item">
                    <img src="../assets/img/icon_chaoshi.png" alt="">
                    <div class="itemRight">
                      <div class="num">{{ num[0] }}</div>
                      <div class="numText">超时未反馈</div>
                    </div>
                  </li>
                  <li class="item">
                    <img src="../assets/img/icon_weibihuan.png" alt="">
                    <div class="itemRight">
                      <div class="num">{{ num[1] }}</div>
                      <div class="numText">未闭环</div>
                    </div>
                  </li>
                  <li class="item">
                    <img src="../assets/img/icon_chongfushijian.png" alt="">
                    <div class="itemRight">
                      <div class="num">{{ num[2] }}</div>
                      <div class="numText">历史重复事件</div>
                    </div>
                  </li>
                </ul>
                <div class="zzt">
                  <Zzt></Zzt>
                </div>
              </div>
            </BorderBox8>
          </li>
          <li class="abnormalItem">
            <!-- <img src="../assets/img/abnormal_title3.png" alt=""> -->
            <BorderBox8 class="abnormalContentBorder" dur="5">
              <div class="abnormalContent abnormalBg3">
                <NumberComp></NumberComp>
              </div>
            </BorderBox8>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container{
  width: 1736px;
  height: 969px;
  background: url('../assets/img/bg_pop.webp') no-repeat center center;
  background-size: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; 
}
.close{
  width: 37px;
  height: 36px;
  background:url('../assets/img/close.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: 6px;
  right: 16px;
  cursor: pointer;
}
.bg_top{
  display: block;
  width: 100%;
  margin: 0 auto;
}
.content{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.navBorder{
  width: 180px;
  height: 840px;
  margin: 31px 0 0 24px;
  padding: 3px;
  box-sizing: content-box;
}
.navigation{
  width: 180px;
  height: 840px;
  background: url('../assets/img/navigationBg.png') no-repeat center center;
  background-size: 100%;
  /* margin: 31px 0 0 24px; */
  padding-top: 47px;
  box-sizing: border-box;
}
.navList{
  width: 100%;
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 5px;
  box-sizing: border-box;
}
.navItem{
  width: 100%;
  min-height: 72px;
  background: url('../assets/img/navItemLine.png') no-repeat bottom center;
  background-size: 132px 1px;
  cursor: pointer;
}
.navItem:last-child{
  background:none;
}
.firstNav{
  width: 100%;
  height: 72px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  cursor: pointer;
}
.firstNav>img{
  display: block;
  width: 30px;
  /* margin-left: 32px;
  margin-right: 12px; */
  margin: 0 9px 0 28px;
}
.firstNavName{
  font-size: 16px;
  color: #95D1FF;
  opacity: 0.8;
}
.hoverColor{
  color: #29F1FA;
  opacity: 1;
}
.secondNavList{
  width: 100%;
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 5px;
  box-sizing: border-box;
}
.secondNavItem{
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  font-size: 14px;
  line-height: 48px;
  color: #fff;
  opacity: 0.7;
}
.hoverBg{
  color: #fff;
  opacity: 1;
  background: url('../assets/img/btn_selected.png') no-repeat center center;
  background-size: 152px 38px;
  cursor: pointer;
}
.recordContainer{
  /* width: 960px; */
  width: 1026px;
  height: 905px;
  position: relative;
}
.process{
  width: 100%;
  /* height: 607px; */
  height: 602px;
}
.recordContentBorder{
  width: 100%;
  /* height: 264px; */
  height: 270px;
  padding: 3px;
}
.recordContent{
  width: 1020px;
  height: 264px;
  background: url('../assets/img/recordTableBg.png') no-repeat;
  background-size: 100%;
  padding-top: 47px;
  position: relative;
}
.recordTitle{
  display: block;
  width: 100%;
  margin-bottom: 8px;
}
.tableCon{
  width: 100%;
  height: 218px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table{
  width: 972px;
  box-sizing: border-box;
  text-align: left;
  color:#fff;
  border-collapse: collapse;
  font-size: 14px;
}
.table thead{
  background: url('../assets/img/theadBg.png') no-repeat;
  background-size: 100%;
  width: 100%;
  height: 32px;
}
.table thead th{
  color: rgba(255,255,255,0.7);
}
.table tbody td{
  color: rgba(255,255,255,0.8);
}
.table thead th,
.table tbody td{
  font-weight: normal;
  height: 32px;
  padding: 0 20px;
  cursor: pointer;
}
.table tbody tr:nth-child(odd){
  background: rgba(43,105,156,0.01);
}
.table tbody tr:nth-child(even){
  background: rgba(43,105,156,0.1);
}
.table tbody tr:hover:nth-child(odd){
  background: rgba(43,105,156);
}
.table tbody tr:hover:nth-child(even){
  background: rgba(43,105,156);
}
.table tbody td.fault{
  color: #FF9A3D;
}
.abnormal{
  /* width: 432px; */
  width: 438px;
  height: 905px;
  /* padding-right:32px; */
  margin-right: 32px;
  /* padding-top: 30px;
  box-sizing: border-box; */
}
.abnormalList{
  width: 100%;
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.abnormalItem{
  width: 100%;
  padding-top: 22px;
  position: relative;
}
.abnormalContentBorder{
  width: 100%;
  height: 270px;
  padding: 3px;
}
.abnormalContent{
  width: 432px;
  height: 264px;
  /* background: url('../assets/img/abnormalBg.png') no-repeat; */
  background-repeat: no-repeat;
  background-size:100%;
  display: flex;
  justify-content: space-between;
}
.abnormalBg1{
  background-image: url('../assets/img/abnormalBg1.png');
}
.abnormalBg2{
  background-image: url('../assets/img/abnormalBg2.png');
  align-items: center;
  padding-top: 30px;
}
.abnormalBg3{
  background-image: url('../assets/img/abnormalBg3.png');
}
.chartContainer{
  width:212px;
  height:161px;
  /* padding-right: 12px; */
  /* box-sizing: border-box; */
  box-sizing: content-box;
  margin-top: 42px;
  /* padding: 20px 0; */
  padding-top:30px;
}
.chart1{
  width: 200px;
  /* height: 162px; */
  height: 264px;
  /* display: flex;
  justify-content: center; */
  position: relative;
  padding-top: 92px;
  box-sizing: border-box;
  /* margin-top: 36px; */
}
.chart1>img{
  display: block;
  width: 100%;
}
.percent{
  font-size: 12px;
  line-height: 14px;
  color:#fff;
  position: absolute;
  top: 0;
  left: 30px;
}
.classify{
  font-size: 8px;
  line-height: 12px;
  color: #95D1FF;
  position: absolute;
  top: 14px;
  left: 48px;
}
.classifyList{
  width: 100%;
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
.classifyItem{
  margin-right: 12px;
  display: flex;
  align-items: center;
  height: 14px;
  line-height: 14px;
}
.classifyItem:last-child{
  margin-right: 0;
}
.classifyLabel{
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  margin-right: 4px;
  margin-top: 2px;
}
.classifyName{
  font-size: 10px;
  opacity: 0.7;
  color: #95D1FF;
}
.list{
  width: 100%;
  list-style: none;
  overflow: hidden;
  margin: 19px auto 0;
  padding: 0;
}
.item{
  display: flex;
  justify-content: center;
  align-items: center;
}
.item>img{
  display: block;
  width: 68px;
}
.num{
  width: 70px;
  height: 40px;
  font-family: 'DINPro';
  background: url('../assets/img/numBg.png') no-repeat;
  background-size: 100%;
  line-height: 36px;
  text-align: center;
  color: rgba(41,241,250,1);
}
.numText{
  font-size: 10px;
  color: rgba(149,209,255,0.7);
  padding-left: 10px;
}
.chart2{
  display: block;
  width: 236px;
  height: 166px;
  margin: 27px 10px 0 0;
}
.zzt{
  display: block;
  width: 550px;
  height: 200px;
}
</style>
